import { Component, Host, h, Prop, ComponentInterface, Watch } from '@stencil/core';

@Component({
  tag: 'context-menu-icon',
  styleUrl: 'context-menu-icon.scss',
  shadow: true,
})
export class ContextMenuIcon implements ComponentInterface {
  /**
   * 图标路径
   *
   * @author chitanda
   * @date 2022-03-22 14:03:47
   * @type {string}
   */
  @Prop()
  icon: string;
  @Watch('icon')
  watchIcon(): void {
    this.updateIconMode();
  }

  /**
   * 图标模式
   *
   * @author chitanda
   * @date 2022-03-22 14:03:41
   * @type {('svg' | 'img')}
   */
  iconMode: 'svg' | 'img' = 'img';

  /**
   * 组件加载完毕之前
   *
   * @author chitanda
   * @date 2022-03-22 14:03:55
   */
  componentWillLoad(): void {
    this.updateIconMode();
  }

  /**
   * 更新图标模式
   *
   * @author chitanda
   * @date 2022-03-22 14:03:07
   */
  updateIconMode(): void {
    if (this.icon && this.icon.endsWith('.svg')) {
      this.iconMode = 'svg';
    } else {
      this.iconMode = 'img';
    }
  }

  render() {
    if (!this.icon) {
      return;
    }
    return (
      <Host class='context-menu-icon'>
        {this.iconMode === 'svg' ? <context-ion-icon src={this.icon} /> : <img src={this.icon} />}
      </Host>
    );
  }
}
